<template>
  <div class="customerinfo-container flex flex-row min-w-full">
    <div class="flex-1 pt-7 pr-7 border-0 border-r border-gray-200 border-solid">
      <a-skeleton :loading="loading">
        <a-descriptions
          :title="t('aiot.serviceOrder.repairInfo')"
          :label-style="{ width: '130px', color: ' #7B879A' }"
          :column="1"
          :colon="false"
          class="pt-4"
        >
          <a-descriptions-item>
            <div class="flex flex-row items-center">
              <a-image class="w-24 h-24 mr-4" :src="deviceimg" :fallback="emptyImg" />
              <div class="flex flex-col">
                <KeyValue
                  :label="t('aiot.equpiment.equipmentName')"
                  class="mt-3 cursor-pointer"
                  value-class="!text-color-active"
                  :value="serviceInfo?.equipmentName || '--'"
                  @self-click="viewEquipmentInfo"
                />
                <KeyValue :label="t('aiot.equpiment.equipmentNo')" :value="serviceInfo?.equipmentVo?.equipmentNo" />
                <KeyValue :label="t('aiot.equpiment.location')" :value="serviceInfo?.equipmentVo?.location" />
              </div>
            </div>
          </a-descriptions-item>
          <a-descriptions-item v-for="(item, index) in repairArr" :key="'contract' + index" :label="item.label">{{
            serviceInfo[item.value] || "--"
          }}</a-descriptions-item>
        </a-descriptions>
        <a-descriptions
          :label-style="{ width: '130px', color: ' #7B879A' }"
          :column="1"
          :colon="false"
          layout="vertical"
        >
          <a-descriptions-item :label="t('aiot.serviceWorkOrderInfo.faultImgs')">
            <!-- <div v-if="faultImgs.length > 0" class="flex flex-row items-center flex-wrap">
              <img v-for="(item, index) in faultImgs" :key="index + 'faultImg'" class="w-24 h-24 mr-4" :src="item" />
            </div> -->
            <a-image-preview-group v-if="faultImgs && faultImgs.length > 0" class="flex flex-row">
              <a-image
                v-for="(item, index) of faultImgs"
                :key="'images' + index"
                :fallback="emptyImg"
                width="84px"
                height="84px"
                :src="item"
              />
            </a-image-preview-group>
            <span v-else>--</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-skeleton>
    </div>
    <div class="flex-1 p-7 border-0 border-r border-gray-200 border-solid">
      <a-skeleton :loading="loading">
        <a-descriptions
          :title="t('aiot.serviceApply.contactInfo')"
          :label-style="{ width: '130px', color: ' #7B879A' }"
          :column="1"
          :colon="false"
          class="pt-4"
        >
          <a-descriptions-item v-for="(item, index) in contactInfoArr" :key="'base' + index" :label="item.label">{{
            getValue(item)
          }}</a-descriptions-item>
        </a-descriptions>
      </a-skeleton>
    </div>
    <div class="flex-1 p-7 border-0 border-r border-gray-200 border-solid">
      <a-skeleton :loading="loading">
        <a-descriptions
          :title="t('aiot.serviceApply.ApplyInfo')"
          :label-style="{ width: '130px', color: ' #7B879A' }"
          :column="1"
          :colon="false"
          class="pt-4"
        >
          <a-descriptions-item v-for="(item, index) in applyInfoArr" :key="'base' + index" :label="item.label">{{
            getValue(item)
          }}</a-descriptions-item>
        </a-descriptions>
      </a-skeleton>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { DEFAULT_IMG_BASE64_STR } from "/@/utils/file";
import { computed, ref, watch } from "vue";
import { ServiceApplyInfo } from "/@/api/aiot/serviceApply/models";
import emptyImg from "/emptyImg.svg";
import { useI18n } from "/@/locales/useI18n";
const { t } = useI18n();
const faultImgs = ref<Array<string | undefined>>([]);
// 获取设备图片
watch(
  () => props.serviceInfo,
  (val) => {
    faultImgs.value = props.serviceInfo.faultImages || [];
  }
);
const deviceimg = computed(() => {
  let imgs: Array<string> = [];
  imgs = props.serviceInfo.equipmentVo?.equipmentInfo?.equipmentPhotoList || [];
  return imgs[0] || emptyImg;
});

function getValue(item) {
  if (item.type === "mutil") {
    return (props.serviceInfo[item.value] || "--") + `(${props.serviceInfo[item.mutilKey] || "--"})`;
  } else {
    return props.serviceInfo[item.value] || "--";
  }
}
const contactInfoArr = [
  { label: t("aiot.serviceWorkOrderInfo.projectName"), value: "projectName" },
  {
    label: t("aiot.serviceWorkOrderInfo.contactName"),
    value: "contactsPerson",
    type: "mutil",
    mutilKey: "contactsPhone",
  },
  // t("aiot.serviceWorkOrderInfo.")
  // t("aiot.serviceApply.")
  { label: t("aiot.serviceWorkOrderInfo.address"), value: "address" },
  { label: t("aiot.serviceWorkOrderInfo.expectedTime"), value: "expectedTime" },
];
const repairArr = [
  { label: t("aiot.serviceApply.equipmentNum"), value: "equipmentNum" },
  { label: t("aiot.serviceApply.faultTypeName"), value: "faultTypeName" },
  { label: t("aiot.serviceWorkOrderInfo.happenTime"), value: "happenTime" },
  { label: t("aiot.serviceApply.description"), value: "descriptions" },
  // { label: "故障图片", value: "fax" },
];
const applyInfoArr = [
  { label: t("aiot.serviceApply.serviceOrderCode"), value: "serviceOrderCode" },
  { label: t("aiot.serviceApply.serviceTypeName"), value: "serviceTypeName" },
  { label: t("aiot.serviceApply.applicant"), value: "applicant", type: "mutil", mutilKey: "applicantPhone" },
  { label: t("aiot.applyManage.applicantOn"), value: "createdOn" },
];
const props = withDefaults(
  defineProps<{
    serviceInfo: ServiceApplyInfo;
    loading: boolean;
  }>(),
  {}
);
function viewEquipmentInfo() {
  const link = document.createElement("a"); // 创建a标签
  if (props.serviceInfo?.equipmentVo) {
    link.href = `/#/equipmentDetail/${props.serviceInfo?.equipmentVo.equipmentId}/overview`;
    link.target = "_blank";
    link.click();
  }
}
</script>

<style lang="less" scoped>
:deep(.ant-image) {
  max-width: 24rem;
  max-height: 24rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
}
:deep(.ant-descriptions-item-content) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
